<template>
  <div>
    <el-form :inline="true">
      <el-form-item label="一级分类">
        <el-select style="width: 240px" v-model="c1Id" @change="c1Change">
          <el-option
            v-for="(item, index) in c1Arr"
            :key="item.id"
            :value="item.id"
            :label="item.name"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="二级分类">
        <el-select style="width: 240px" v-model="c2Id" @change="c2Change">
          <el-option
            v-for="(item, index) in c2Arr"
            :key="item.id"
            :value="item.id"
            :label="item.name"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="三级分类">
        <el-select style="width: 240px" v-model="c3Id" @change="c3Change">
          <el-option
            v-for="(item, index) in c3Arr"
            :key="item.id"
            :value="item.id"
            :label="item.name"
          ></el-option>
        </el-select>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import { reactive, toRefs, ref, onMounted } from 'vue'
import { reqC1, reqC2, reqC3, reqAttr } from '@/api/product/attr'
import type { CategoryResponseData } from '@/api/product/attr/type'

onMounted(() => {
  getC1()
})

let c1Arr = ref()
const getC1 = async () => {
  let res = await reqC1()
  c1Arr.value = res.data
}

let c1Id = ref()
let c2Arr = ref()
const c1Change = async () => {
  let res = await reqC2(c1Id.value)
  c2Arr.value = res.data
}

let c2Id = ref()
let c3Arr = ref()
const c2Change = async () => {
  let res = await reqC3(c2Id.value)
  c3Arr.value = res.data
}

let c3Id = ref()
const emit = defineEmits(['getAttr'])
const c3Change = async () => {
  emit('getAttr', c1Id.value, c2Id.value, c3Id.value)
}
</script>
<style scoped lang="scss"></style>
